<template>
	<div class="refund">
		<ul class="border-b20 pl30rem pr30rem">
			<li class='pt20rem pb20rem layout-juscon' v-for="item in data.concent">
				<img class="mr15rem" style="width:5rem;height: 5rem;" :src="img_url + goods_pic" alt="">
				<div class="flex_1"> 
					<p class="bold black fs28rem">{{ item.goods_name }}</p>
				</div>
			</li>
		</ul>
		<ul class="pl30rem pr30rem bg-white pay-list">
			<li class="border-b layout pt25rem pb25rem" @click="payMode = true">
				<strong class="bold black fs30rem c333">退款原因</strong>
				<span class="fs30rem c666">{{ name }}<i class="iconfont icon-right2 green"></i></span>
			</li>
			<li class="pt25rem pb25rem layout">
				<strong class="bold black fs30rem c333">退款金额：</strong>
				<p class="flex_1 cxo-red-color">￥{{ data.refund_real_money }}</p>
			</li>
		</ul>
		<div class="border-t20" v-if="explain">
			<h3 class="bold black pl30rem pr30rem fs30rem pt25rem pb25rem">退款说明</h3>
			<textarea 
			  	v-model="content"
				class="bg-f5 pt20rem pr10rem pb20rem pl10rem w92 auto block" 
				style="border:none;resize:none"
				rows="6" 
				placeholder="请输入..."
			></textarea>	
		</div>
		
		<button class='cxo-red white w92 auto block circle-8 pt20rem pb20rem submit' @click="sumbit">提交</button>
		<popup v-model="payMode" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">选择原因<i class="iconfont icon-guanbi" @click="payMode = false"></i></h2>
				<ul v-for="(item,index) in data.refund_reason" :key="index">
					<li class="pl30rem pr30rem pt20rem pb20rem border-t" @click="select(item)">
						<label :for="'deposit' + index" class="layout w100 h100">
							<div>
								<p class="fs30rem mb20rem">{{ item }}</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" :id="'deposit' + index">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
				</ul>
			</div>
		</popup>
	</div>
</template>

<script>
	import { getRefund } from '@/api/member';
	import { cancelOrder } from '@/api/ordering';
	import { Popup, Radio } from 'mint-ui';
	export default{
		components:{
			Popup,
			Radio
		},
		data()
		{
			return{
				explain : false,
				payMode : false,
				content : '',
				name    : '',
				sign    : 1,
				data 	: [],
				img_url : process.env.IMG_URL,
				uid     : localStorage.getItem('uid'),
				order_id : this.$route.query.order_id,
				goods_pic: this.$route.query.goods_picture,
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				let params = {
					uid      : this.uid,
					order_id : this.order_id
				}
				getRefund(params).then(res => {
					this.data = res.data;
				})
			},
			select(item)
			{	
				this.name = item;
				if(item == '其他')
					this.explain = true;
				this.payMode = false;
			},
			sumbit()
			{
				if(!this.name)
					return this.payMode = true;

				let params = {
					uid : this.uid,
					order_id : this.order_id,
					sign : this.sign,
					refund_money : this.data.refund_real_money,
					refund_reason : this.name == '其他'? this.content : this.name
				}
				cancelOrder(params).then(res => {
					this.$router.replace('/member/order/afterSalesOrder')
				})
			}
		}
	}
</script>

<style lang="less">
	.refund{
		.coupon{
			h2{
				height: 110/28rem;
				line-height: 110/28rem;
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}
			.couponList{
				li{
					.get-btn{
						height: 60/28rem;
						line-height: 60/28rem;
						width: 140/28rem;
					}
					.bg-coupon{
						width: 240/28rem;
						// background: url(../../assets/img.png)no-repeat center /100% 100%;
					}
				}
			}	
		}
		.submit{
			position: fixed;
			bottom:15%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
</style>